<template>
  <el-dialog
    :title="`${dialogType === 'edit' ? '编辑' : '新增'}联系信息`"
    :visible.sync="customVisible"
    width="50%"
    :before-close="handleCancel"
  >
    <el-form class="basic-form" ref="form" :model="customData" label-width="120px" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="customData.userName" clearable />
      </el-form-item>
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="customData.companyName" clearable />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactTelephone">
        <el-input v-model="customData.contactTelephone" clearable />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="emailAddress">
        <el-input v-model="customData.emailAddress" clearable />
      </el-form-item>
      <el-form-item label="联系信息" prop="descriptionInfo">
        <el-input v-model="customData.descriptionInfo" clearable />
      </el-form-item>

      <el-form-item label="是否阅读" prop="isRead">
        <el-select v-model="customData.isRead" placeholder="请选择" clearable>
          <el-option
            v-for="item in isEnableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否导入" prop="isImportant">
        <el-select v-model="customData.isImportant" placeholder="请选择" clearable>
          <el-option
            v-for="item in isEnableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button v-waves type="primary" @click="handleOk()">确认</el-button>
      <el-button v-waves @click="handleCancel()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SingleImageUpload from '@/components/Upload/SingleImage';
import * as contactInfoHttp from '@/api/contact-info';
import { isEnableOptions } from '@/utils/config';

export default {
  name: 'edit-user',
  components: { SingleImageUpload },
  props: {
    title: {
      type: String,
      default: '弹框'
    },
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: [Object, undefined]
    }
  },
  data() {
    return {
      dialogType: 'add', // add / edit
      rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        contactTelephone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        emailAddress: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }],
        descriptionInfo: [{ required: true, message: '请输入联系信息', trigger: 'blur' }],
        isRead: [{ required: true, message: '请选择是否阅读', trigger: 'change' }],
        isImportant: [{ required: true, message: '请选择是否导入', trigger: 'change' }],
      },
      isEnableOptions: isEnableOptions
    }
  },
  computed: {
    customVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    },
    customData: {
      get() {
        return this.data || {};
      },
      set(value) {
        this.$emit('update:data', value);
      }
    }
  },
  methods: {
    handleCancel() {
      this.customVisible = false;
      this.customData = {};
      this.$refs['form'].resetFields();
    },

    // 确认
    handleOk() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          let res;
          if (this.customData.contactInfoId === void 0) {
            res = await contactInfoHttp.addContactInfo({ ...this.customData, applicationSceneSource: 12 });
          } else {
            res = await contactInfoHttp.updateContactInfo({ ...this.customData, applicationSceneSource: 12 });
          }

          this.$message.success('提交成功');
          this.$emit('loading', res);
          this.handleCancel();
        } catch(e) {
          console.log('edit solution handleOk: ', e);
          this.$message.error('提交失败');
        }
      });
    }
  },
  watch: {
    data(value) {
      // 默认有 __ob__ 值
      if (Object.getOwnPropertyNames(value).length > 1) {
        this.dialogType = 'edit';
      } else {
        this.dialogType = 'add';
      }
    }
  }
}
</script>
